<!--
 * @Author: 肖芬芳 1911683843@qq.com
 * @Date: 2022-11-17 11:40:09
 * @LastEditors: 肖芬芳 1911683843@qq.com
 * @LastEditTime: 2022-12-13 14:47:29
 * @FilePath: \blog\src\views\admin\home\components\Nav.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="nav">
    <el-icon
      :size="25"
      class="menu-ico"
      @click="$store.commit('changeIsCollapse')"
    >
      <Expand v-if="$store.state.isCollapse==true" />
      <Fold v-if="$store.state.isCollapse==false" />
    </el-icon>
    <!-- 导航栏 -->
    <el-breadcrumb :separator-icon="ArrowRight">
      <el-breadcrumb-item
        :key="item.path"
        v-for="item in routes"
      >
        {{ item.meta.title }}
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
import { ArrowRight } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const routes = computed(() => {
  return router.currentRoute.value.matched.filter(item => item.meta.title)
})
</script>

<style lang="scss">
.nav{
    width: 100%;
    height: 30px;
    background-color: #fff;
    padding-left: 10px;
    box-sizing: border-box;
    display: flex;
    justify-content:flex-start;
    align-items: center;
}
.menu-ico{
    margin-right: 10px;
  }
.el-breadcrumb__inner{
  color: #97a8be !important;
}
</style>
